// 类组件
// import React,{Component} from 'react';

// 函数组件
import {React,useState,useEffect} from 'react';

import styles from './uc-loading.module.css';
import propTypes from 'prop-types';

// 类组件
// export default class UcLoading extends Component{
//   state = {
//     el:null
//   };

//   static defaultProps = {
//     spinning:true,
//   };
//   static propTypes = {
//     spinning: propTypes.bool,
//     delay: propTypes.number
//   };

//   componentDidMount(){
//     setTimeout(()=>{
//       if (this.props.spinning){
//         let el = (
//           <div className={styles.spinner}></div>
//         );
//         this.setState({el})
//       }
//     },this.props.delay)
//   }

//   render(){

//     // let {children, style, onClick,disabled, type,  size} = this.props;

//     return this.props.spinning ? this.state.el : null;
//   }
// }

// 函数组件
const UcLoading = props =>{
  // 定义状态
  const [el,setEl] = useState(null);
  // 初始化元素函数
  const init = ()=>{
    setTimeout(()=>{
      if (props.spinning){
        let el = (
          <div className={styles.spinner}></div>
        );
        setEl(el)
      }
    },props.delay)
  }

  // 生命周期
  useEffect(()=>{
    init();
  })

  return props.spinning ? el : null;
}

UcLoading.defaultProps = {
  spinning:true,
};

UcLoading.propTypes = {
  spinning: propTypes.bool,
  delay: propTypes.number
};

export default UcLoading;